<template>
    <!-- 全局添加穿透 -->
    <div class="penetration-public">
        <div class="back-icon">
            <el-icon class="right-icon" @click="handleGoBack">
                <ArrowLeft />
            </el-icon>
            添加穿透
        </div>
        <!-- {{ currentValue }} -->
        <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-position="left">
            <el-form-item>
                <div class="header">
                    <div class="left">
                        <i class="iconfont icon-a-icon-Largescreen"></i> 主屏:{{
                            pageConfig.name
                        }}
                    </div>
                    <el-select v-model="selectValue" @change="handleSelectChange" clearable class="select-area">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.id" />
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item label="穿透动作">
                <el-select v-model="formData.events" placeholder="" clearable class="select-events">
                    <el-option v-for="item in penetratingActionOptions" :key="item.label" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="显示字段数据" class="check-group-list">
                <el-checkbox-group v-model="formData.checkList" class="table-name-area">
                    <el-checkbox v-for="(item, index) in penetrationCheckListOptions" :key="index" :label="item">
                        <i class="iconfont icon-icon-field1"></i>
                        {{ item.label }}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { penetratingActionOptions } from './constants';
import { flatList } from '@/utils/common';
import useComponentConfig from '@/views/design-center/store/component-config';
import { getDataSetColumnListApi } from '@/views/design-center/api/data-set';
const useComponentConfigStore = useComponentConfig();
const { pageConfig } = useComponentConfigStore;
const formData = ref({});
const rules = reactive({});
const currentId = ref('');//当前选中组件的id
const selectValue = ref('');

//新增的时候,获取未配置穿透的组件,在配置了数据集的前提下可以配置穿透关系
//1- 获取当前大屏下配置了数据集,且未配置穿透项的组件
//2.选择了组件后,获取选择组件的配置数据集,展示显示字段数据
//3.在关闭弹框的时候修改仓库大屏配置数据

//修改的时候,传递组件配置穿透的初始值
//

const props = defineProps({
    currentValue: {
        type: Object,
        default: () => { }
    },
    currentType: {
        type: String,
        default: () => ''//当前操作类型,add-新增,edit-修改
    }
});

const emit = defineEmits(['go-back']);
const penetrationCheckListOptions = ref([]);

const options = computed(() => {
    if (props.currentType === 'edit') {
        //修改的时候,过滤出穿透配置不为空的
        return flatList(pageConfig.list)
            .filter(
                (item) =>
                    item.setups.penetrationSettings &&
                    JSON.stringify(item.setups.penetrationSettings) !== '{}'
            )
            ?.map((item) => {
                return {
                    label: item.setups.componentName,
                    value: item.setups.componentName,
                    id: item.id.toString()
                };
            });
    } else {
        //新增穿透关系的时候,需要增加的是已经配置了数据集的组件,且未配置穿透项
        return flatList(pageConfig.list)
            .filter(
                (item) =>
                    JSON.stringify(item.setups.associatedDatasets) !== '{}' &&
                    JSON.stringify(item.setups.penetrationSettings) === '{}'
            )
            .map((item) => {
                return {
                    id: item.id,
                    label: item.setups.componentName,
                    value: item.setups.componentName,
                    associatedDatasets: item.setups.associatedDatasets,
                };
            });
    }
});

const handleSelectChange = (value) => {
    currentId.value = value;//获取选中组件的id
    let getDataSetId = options.value.find(item => item.id === value)?.associatedDatasets?.id || ''
    getChecKListOptions(getDataSetId);
    console.log(value, options.value, 1111111111);

};

//根据数据集id获取组件的字段
const getChecKListOptions = async (dataSetId) => {
    if (!dataSetId) return false;
    try {
        let res = await getDataSetColumnListApi({
            dataSetId: dataSetId
        });
        let dealData = res?.data?.map(item => {
            return {
                label: item.columnAnotherName || item.columnName,
                value: item.columnName,
            }
        }) || []
        penetrationCheckListOptions.value = dealData
    } catch (error) {
        penetrationCheckListOptions.value = []
    }

};

const handleGoBack = () => {
    emit('go-back');
};

if (props.currentType === 'edit') {
    selectValue.value = currentId.value = props.currentValue.id;//当前选中组件的id
    formData.value = reactive(props.currentValue?.setups?.penetrationSettings);
    getChecKListOptions(
        props.currentValue?.setups.associatedDatasets?.id || ''
    );
}

defineExpose({ formData, currentId });
</script>
<style scoped lang="scss">
// @import '../../styles/reset-select.scss';
.penetration-public {
    padding: 0.16rem 0.24rem 0 0.3rem;
}

.back-icon {
    display: flex;
    align-items: center;
    margin: 0rem 0 0.21rem;
    font-weight: 600;

    .right-icon {
        margin-right: 0.13rem;
    }
}

.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.16rem;

    .select-area {
        width: 2.2rem !important;
        background: #f2f3f5;
    }
}

.select-events {
    background: #f2f3f5;
}

:deep(.el-form-item) {
    width: 100%;
    display: flex;
    margin-bottom: 0.16rem;

    .el-form-item__label {
        width: 1rem;
    }

    .el-form-item__content {
        flex: 1;

        .el-select {
            width: 100%;
        }
    }

    .el-checkbox__label {
        color: #1d2129;
    }
}

.table-name-area {
    display: flex;

    flex-direction: column;

    .icon-icon-field1 {
        color: #c3e7fe;
    }
}

.check-group-list {
    :deep(.el-form-item__content) {
        border: 1px solid #ccc;
        padding: 0.16rem;
        min-height: 1rem;
    }
}
</style>
